<template>
  <thead class="VPivottableHeader">
    <template v-if="pivotData">
      <tr
        v-for="(c, j) in colAttrs"
        :key="`colAttrs${j}`"
      >
        <VPivottableHeaderRows
          v-if="rowAttrs.length !== 0 && j === colAttrs.length - 1"
          :row-attrs="rowAttrs"
          :row-total="rowTotal"
          :col-attrs-length="colAttrs.length"
          :locale-strings="localeStrings"
          :fields="fields"
          :groupMode="groupMode"
        />
        <th v-if="rowAttrs.length === 0 && j === colAttrs.length - 1"></th>
        <th
          v-if="j === 0 && rowAttrs.length !== 0"
          :colSpan="rowAttrs.length"
          :rowSpan="colAttrs.length - 1"
        />
        <th v-if="getText(c)" class="pvtAxisLabel">
          {{ getText(c) }}
        </th>
        <VPivottableHeaderColumns
          :col-keys="colKeys"
          :col-index="j"
          :col-attrs-length="colAttrs.length"
          :row-attrs-length="rowAttrs.length"
          :fields="fields"
          :aggregatorName="aggregatorName"
          :locale-strings="localeStrings"
        />
        <VPivottableHeaderRowsTotal
          v-if="j === 0 && rowTotal"
          :col-attrs-length="colAttrs.length"
          :row-attrs-length="rowAttrs.length"
          :locale-strings="localeStrings"
        />
      </tr>
    </template>
  </thead>
</template>

<script setup>
import { useProvidePivotData } from '@/pivottable/composables/useProvidePivotData'
import VPivottableHeaderColumns from './VPivottableHeaderColumns.vue'
import VPivottableHeaderRows from './VPivottableHeaderRows.vue'
import VPivottableHeaderRowsTotal from './VPivottableHeaderRowsTotal.vue'

const props = defineProps({
  rowTotal: {
    type: Boolean,
    default: true
  },
  localeStrings: {
    type: Object,
  },
  fields: {
    type: Array,
    default: () => []
  },
  aggregatorName: {
    type: String,
  },
  groupMode: {
    type: String,
    default: 'default'
  },
})

const { pivotData, colAttrs, rowAttrs, colKeys, vals } = useProvidePivotData();
const getText = (text) => {
  if (text === 'srfname') {
    return '';
  }
  const item = props.fields.find(x => x.codeName === text);
  if (item) {
    return item.caption;
  }
  return text;
};
</script>
